<template>
  <view class="contenter">
    <view class="nav-style" :style="{'height':navHeight+'px','padding-top':statusBarHeight+'px'}" >
      <store-change :list="list" @change="changeStore"></store-change>
    </view>
    <!--时间筛选-->
    <indextime @time="time" :times="form"></indextime>
    <view class="main" >
      <view class="content">
        <view class="u-flex">
          <view class="conMain">
            <view class="main_left">
              <view class="name">销售额</view>
              <view class="price">{{data.sales}}<text>元</text></view>
            </view>
            <view class="img">
              <image src="/static/icon/xiao.png"></image>
            </view>
          </view>
          <view class="conMain">
            <view class="main_left">
              <view class="name">订单数</view>
              <view class="price">{{data.order_num}}<text>单</text></view>
            </view>
            <view class="img">
              <image src="/static/icon/oder.png"></image>
            </view>
          </view>
          <view class="conMain">
            <view class="main_left">
              <view class="name">服务会员数</view>
              <view class="price">{{data.time_count_uid}}<text>人</text></view>
            </view>
            <view class="img">
              <image src="/static/icon/user.png"></image>
            </view>
          </view>
          <view class="conMain">
            <view class="main_left">
              <view class="name">总会员数</view>
              <view class="price">{{data.count_uid}}<text>人</text></view>
            </view>
            <view class="img">
              <image src="/static/icon/number.png"></image>
            </view>
          </view>
          <view class="conMain">
            <view class="main_left">
              <view class="name">服务达成率</view>
              <view class="price">{{service_rate}}%</view>
            </view>
            <view class="img">
              <image src="/static/icon/serve.png"></image>
            </view>
          </view>
          <view class="conMain">
            <view class="main_left">
              <view class="name">销售达成率</view>
              <view class="price">{{sales_rate}}%</view>
            </view>
            <view class="img">
              <image src="/static/icon/cheng.png"></image>
            </view>
          </view>
          <view class="conMain conw" v-if="type == 3">
            <view class="main_left">
              <view class="name">总收入</view>
              <view class="price">{{data.balance}}<text>元</text></view>
            </view>
            <view class="bt" @click.once="tixian">
              立即提现
            </view>
          </view>
        </view>
      </view>
      <view class="u-flex mainUrl" v-for="(data,index) in urlList" @click="urlChange(data.url)" :key="index">
        <view class="urlLeft u-flex">
          <image :src="`/static/icon/${data.icon}.png`"></image>
          <text>{{data.name}}</text>
        </view>
        <view v-if="index !== 3&& index !== 4">
          <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Indextime from "../../components/index/indexTime";
import StoreChange from "../../components/item/storeChange";
export default {
  name: "index",
  components: {StoreChange, Indextime},
  data(){
    return{
      urlList:[
        {name:'商品排行榜',url:'/pages/index/sale',icon:'shop'},
        {name:'技师排行榜',url:'/pages/index/technician',icon:'jishi'},
        {name:'门店排行榜',url:'/pages/index/store',icon:'isuee'},
        {name:'投诉反馈处理',url:'/pages/feedBack/feedback',icon:'fankui'},
        {name:'修改密码',url:'/pages/login/newPassword',icon:'password'},
      ],
      type:'',
      navHeight: '', //整体顶部导航栏的高度
      statusBarHeight:'',//状态栏高度
      form:{
        start_time:'',//
        end_time:'',//
      },
      service_rate:'',//
      sales_rate:'',//
      list:[],//门店列表
      data:{},//首页数据
    }

  },
  onShow(){
    uni.hideTabBar()
  },
  onLoad(){
//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
    let {statusBarHeight,system} = uni.getSystemInfoSync()
    this.statusBarHeight = statusBarHeight
    this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48)
    this.type = uni.getStorageSync('type')
  },
  created(){
    this.store()
  },
  methods:{
    //选择门店
    changeStore(e){
      this.storeId = e.id

      this.myUser()
      this.achRates()
    },
    //筛选时间
    time(time){
      this.form.start_time = time.start_time
      this.form.end_time = time.end_time
      this.myUser()
    },
    //请求门店数据
    store(){
      this.$api.storeList().then(res => {
        this.list = res.data
        this.storeId = this.list[0].id
        uni.setStorage({
          key: 'store',
          data: this.list[0],
          success: function () {
          }
        });
        uni.setStorage({
          key: 'storeList',
          data: this.list,
          success: function () {
          }
        });
        this.NewDay()//请求今日
        this.myUser()
        this.achRates()
      })
    },
    //请求门店数据
    myUser(){
      let form = {
        start_time:this.form.start_time ,
        end_time:this.form.end_time ,
        store_id:this.storeId,
      }
      //请求首页数据
      this.$api.myData(form).then(res => {
        this.data = res.data
      })
    },
    //请求门店达成率
    achRates(){
      if(this.list.length != 0){
        this.$api.achRate({store_id:this.storeId}).then(res => {
          this.service_rate = res.data.service_rate
          this.sales_rate = res.data.sales_rate
        })
      }
    },
    //跳转页面
    urlChange(url){
      this.$u.route({
        url: url,
        params:{
          id: this.storeId
        }
      });
    },
    //提现
    tixian(){
      this.$u.route({
        url: '/pages/Withdrawal/index',
      });
    },
  }
}
</script>

<style scoped lang="scss">
  .contenter{
    background: $uni-bg-color-grey;
    padding-bottom: 20rpx;
    .main{
      padding: 0 32rpx;
      .content{
        margin-top: 20rpx;
        padding: 20rpx;
        background: white;
        box-sizing: border-box;
        border-radius: 8rpx;
        .u-flex{
          flex-wrap: wrap;
        }
        .conw{
          width: 100% !important;
        }
        .conMain{
          width: 316rpx;
          height: 140rpx;
          background: $uni-bg-color-grey;
          border-radius: 8rpx;
          padding: 28rpx 28rpx 28rpx 20rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-right: 15rpx;
          margin-bottom: 20rpx;
          &:nth-child(even){
            margin-right: 0;
          }
          .bt{
            width: 160rpx;
            height: 58rpx;
            background: rgba(69, 128, 110, 0.28);
            border: 2rpx solid $uni-color-primary;
            color: $uni-color-primary;
            opacity: 1;
            border-radius: 4rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            font-weight: bold;
          }
          .img{
            image{
              width: 48rpx;
              height: 48rpx;
            }
          }
          .main_left{
            .name{
              font-size: 24rpx;
              color:$uni-text-color-grey ;
              margin-bottom: 10rpx;
            }
            .price{
              font-size: 40rpx;
              font-weight: 400;
              color:$uni-text-color ;
              display: flex;
              text{
                font-size: 20rpx;
                margin-left: 10rpx;
                position: relative;
                top: 18rpx;
                color:$uni-text-color-grey ;
              }
            }
          }
        }
      }
      .mainUrl{
        background: white;
        margin-top: 20rpx;
        border-radius: 8rpx;
        justify-content: space-between;
        padding: 24rpx 14rpx 24rpx 20rpx;
        .urlLeft{
          image{
            width: 48rpx;
            height: 48rpx;
            margin-right: 20rpx;
          }
          text{
            font-size: 28rpx;
            font-weight: 400;
            color: $uni-text-color;
          }
        }
      }
    }
  }

</style>